<template>
  <div>
    <div class="query-from">
      <el-form
        :inline="true"
        class="demo-form-inline"
        ref="searchForm"
        :model="data"
      >
        <el-form-item label="审批状态" label-width="100px" prop="state">
          <el-select v-model="data.applyState" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="待审批" :value="1" />
            <el-option label="审批中" :value="2" />
            <el-option label="审批拒绝" :value="3" />
            <el-option label="审批通过" :value="4" />
            <el-option label="作废" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLeaveList">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="showMadol = !showMadol"
          >新增</el-button
        >
      </div>
      <el-table :data="leaveList" style="width: 100%" row-key="_id">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template #default="scope">
            <el-button type="primary" @click="checkSistaution(scope.row)"
              >查看</el-button
            >

            <el-popconfirm
              title="您要作废请假条吗"
              confirm-button-text="确认"
              cancel-button-text="”取消"
              confirm-button-type="danger"
              @confirm="deleteLeave(scope.row)"
            >
              <template #reference>
                <el-button type="danger">作废</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="example-pagination-block">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="getNewList"
          :page-size="data.pageSize"
        />
      </div>
      <el-dialog v-model="showMadol">
        <el-form
          :model="formData"
          :rules="rules"
          title="申请休假"
          ref="dialogForm"
        >
          <el-form-item label="休假类型" prop="applyState" label-width="100px">
            <el-select
              v-model="formData.applyState"
              placeholder="选择假期类型"
              style="width: 100%"
            >
              <el-option label="事假" value="1" />
              <el-option label="调休" value="2" />
              <el-option label="年假" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="休假时间" prop="time" label-width="100px">
            <div class="block">
              <el-date-picker
                v-model="formData.time"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="calcTime"
                :unlink-panels="true"
              />
            </div>
          </el-form-item>

          <el-form-item label="休假时长" label-width="100px">
            {{ formData.leaveTime }}
          </el-form-item>

          <el-form-item label="休假原因" prop="reasons" label-width="100px">
            <el-input v-model="formData.reasons" autocomplete="false" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button type="primary" @click="confirm(dialogForm)"
              >确认</el-button
            >
            <el-button @click="dialogVisible = !dialogVisible">取消</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog v-model="showSituation">
        <el-form :model="formsiti" title="申请休假情况" ref="situationForm">
          <el-form-item label="休假类型" prop="applyState" label-width="100px">
            <el-steps
              :active="formsiti.applyState"
              align-center
              style="width: 100%"
            >
              <el-step title="待审批" />
              <el-step title="审批中" />
              <el-step title="审批通过/审批拒绝" />
            </el-steps>
          </el-form-item>

          <el-form-item label="休假类型" prop="time" label-width="100px">
            {{
              formsiti.applyType == 1
                ? "事假"
                : formsiti.applyType == 2
                ? "调休"
                : "年假"
            }}
          </el-form-item>
          <el-form-item label="休假时间" label-width="100px">
            {{
              utils
                .formateDate(new Date(formsiti.startTime))
                .replace("00:00:00", "")
            }}到{{
              " " +
              utils
                .formateDate(new Date(formsiti.endTime))
                .replace("00:00:00", "")
            }}
          </el-form-item>
          <el-form-item label="休假时长" label-width="100px">
            {{ formsiti.leaveTime }}
          </el-form-item>

          <el-form-item label="休假原因" prop="reasons" label-width="100px">
            {{ formsiti.reasons }}
          </el-form-item>
          <el-form-item label="审批状态" prop="reasons" label-width="100px">
            {{
              formsiti.applyState == 1
                ? "待审批"
                : formsiti.applyState == 2
                ? "审批中"
                : formsiti.applyState == 3
                ? "审批拒绝"
                : formsiti.applyState == 4
                ? "审批通过"
                : "作废"
            }}
          </el-form-item>
          <el-form-item label="审批人" prop="reasons" label-width="100px">
            {{ formsiti.curAuditUserName }}
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import api from "../api/index.js";
import { ref, reactive, toRaw, nextTick } from "vue";
import utils from "../utils/index.js";
import { ElMessage, formatter } from "element-plus";
const data = reactive({
  type: "", // approve:审核  默认用户审批列表
  applyState: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref();
const formData = ref({});
const formsiti = ref({});
const searchForm = ref(null);
const dialogForm = ref(null);
const situationForm = ref(null);
const showSituation = ref(false);
let showMadol = ref(false);
//加载动画
const loading = ref(true);
//定义校验规则
const rules = reactive({
  applyState: {
    required: true,
    message: "请选择假期类型",
    trigger: "blur",
  },

  time: {
    required: true,
    message: "请输入时间",
    trigger: "blur",
  },
  reasons: [
    {
      required: true,
      message: "请输入原因",
      trigger: "blur",
    },
  ],
});

//表格头
const columns = reactive([
  {
    label: "单号",
    prop: "orderNo",
    width: 150,
  },
  {
    label: "休假时间",
    prop: "time",
  },
  {
    label: "休假类型",
    prop: "applyType",
    formatter(row, column, value) {
      return {
        1: "事假",
        2: "调休",
        3: "年假",
      }[value];
    },
  },
  {
    label: "休假原因",
    prop: "reasons",
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: "审批人",
    prop: "auditUsers",
  },
  {
    label: "审批状态",
    prop: "applyState",
    formatter: (row, column, value) => {
      return {
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废",
      }[value];
    },
  },
]);
//提交新增请假
const confirm = () => {
  dialogForm.value.validate((valid) => {
    if (valid) {
      addLeave();
    }
  });
};
// 将新增请假发送到服务器
const addLeave = async () => {
  formData.value.startTime = formData.value.time[1];
  formData.value.endTime = formData.value.time[0];
  formData.value.action = "create";
  formData.value.leaveTime;
  delete formData.value.time;
  let result;
  try {
    result = await api.leaveOperate(toRaw(formData.value));
  } catch (error) {
    showMadol.value = false;
    console.log(error.data);
    ElMessage.fail("申请失败");
  }

  if (result.data.code == 200) {
    showMadol.value = false;
    getLeaveList();
    ElMessage.success("申请成功");
    formsiti.value = {};
  }
};
//重置搜索表单
const reset = () => {
  data.applyState = "";
  searchForm.value.resetFields();
  getLeaveList();
};
//计算请假天数
const calcTime = (val) => {
  console.log(val);
  formData.value.leaveTime = (val[1] - val[0]) / (24 * 60 * 60 * 1000) + "天";
};
const leaveList = ref([]);
//获取页数改变后的数据
const getNewList = (page) => {
  data.pageNum = page;
  getLeaveList();
};
const deleteLeave = async (row) => {
  let data = {
    action: "delete",
    _id: row._id,
  };

  let result;
  try {
    result = await api.leaveOperate(toRaw(data));
  } catch (error) {
    console.log(error.data);
    ElMessage.fail("删除失败");
  }

  if (result.data.code == 200) {
    getLeaveList();
    ElMessage.success("删除成功");
  }
};

const getLeaveList = async () => {
  console.log(toRaw(data));
  let result;
  try {
    result = await api.getLeaveList(toRaw(data));
  } catch (error) {
    console.log(error.data);
  }

  if (result.data.code == 200) {
    leaveList.value = result.data.data.list;
    console.log(result.data.data);
    leaveList.value.forEach((ele) => {
      ele.time =
        utils.formateDate(new Date(ele.startTime)).replace("00:00:00", "") +
        "到" +
        utils.formateDate(new Date(ele.endTime)).replace("00:00:00", "");
    });
    total.value = result.data.data.page.total;
    data.pageSize = result.data.data.page.pageSize;
  }
};
getLeaveList();
//查看请假情况
const checkSistaution = (row) => {
  console.log(row);
  formsiti.value = row;
  showSituation.value = true;
};
</script>

<style lang="scss" scoped>
.query-from {
  width: 100%;
  background-color: white;
  .demo-form-inline {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    .el-form-item {
      margin: 0;
    }
  }
}
.base-table {
  overflow: hidden;
  .action {
    margin: 20px 20px;
  }
}

.user-managee {
  overflow: hidden;
}
.example-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
</style>
